<template>
	<view class="shoop_card_box">
		<view class=" " v-for="(item,index) in list" :key="index" :class="[item.min_amount == '0' ? 'bgred' : 'bg']"
			style="position: relative; box-sizing: border-box;">
			<view class="textColor-white" style="position:absolute">
				<view class="d-flex-yCenter-ju " style="padding:46rpx 0rpx 2rpx 36rpx;">
					￥<view class="" style="font-size: 40rpx;font-weight: 500;">
						{{item.money}}
					</view>
				</view>
				<view class="d-flex-yCenter-ju" style="padding:0rpx 0rpx 2rpx 54rpx;font-size: 20rpx;font-weight: 500;">
					{{item.type==1 ? '通用券' : (item.type==2 ? "品类券" : "商品券")}}
				</view>
			</view>
			<view class="" style="height: 100%;">
				<view class="d-flex-ybetween" style="  margin-left: 33%; ">
					<view class="" style=" margin-top: 30rpx;margin-bottom: 24rpx;">
						{{item.min_amount==0?'无使用门槛':`满${item.min_amount}元可使用`}}
					</view>
					<view class="textColor999" style="margin-top: 15rpx;margin-right: 22rpx;color: #FF9703;">
						{{item.integral}}积分
					</view>
				</view>
				<view class="d-flex-yCenter-sb" style="padding-left: 239rpx;">
					<view class="d-flex" style="font-size: 24rpx; ">
						<view class="" style="margin-right: 10rpx;   width: 88rpx;;">
							有效期:
						</view>
						<!-- width:230rpx; -->
						<view class="textColor999" style="" v-if="integralcouponlst">
							{{item.use_time_day==0 ? '时间不限' : (integralcouponlst==true? '兑换后15天内有效': computetime(item.use_time_start*1000) +'/'+ computetime(item.use_time_end*1000))}}
						</view>
					</view>
					<view class="d-flex-yCenter-ju textColor-white" @click="bottompopup(index)" v-if="convert"
						style="font-size: 26rpx;background: #FF9703;border-radius: 6px;width: 120rpx;height: 50rpx;margin-right: 20rpx;">
						立即兑换
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	// 时间戳
	import {
		time
	} from '@/config/tool.js'
	export default {
		props: {
			integralcouponlst: {
				type: Boolean,
				default: true
			},
			// 有效期
			timer: {
				type: String,
				default: '有效期'
			},
			fs: {
				type: String,
				default: '26rpx  36rpx 26rpx 38rpx'
			},
			mt: {
				type: String,
				default: ''
			},
			fscolor: {
				type: String,
				default: '#FF9703'
			},
			list: {
				type: Array,
				default: []
			},
			gitup: {
				type: Boolean,
				default: false,
			},
			rightnum: {
				type: Boolean,
				default: true,
			},
			convert: {
				type: Boolean,
				default: true
			},
			classsb: {
				type: String,
				// default: 'd-flex-yCenter-sb'
			},
			over_boxleft: {
				type: String,
				default: '28'
			},
			over_boxtop: {
				type: String,
				default: '0'
			},

		},
		data() {
			return {

			}
		},
		computed: {
			computetime() {
				return (value) => {
					return time(value, 'YMD')
				}
			},
		},
		methods: {
			bottompopup(index) {
				this.$emit('popu', index)
			},
			//立即领取优惠卷
			gotolq(item) {
				this.$emit('gotolq', item)
			}
		}
	}
</script>

<style lang="scss">
	.bgred {
		width: 702rpx;
		height: 172rpx;
		background: url(../../myCardManagement/static/shoop_cardRed.png);
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.bglast {
		width: 702rpx;
		height: 172rpx;
		background: url(../../myCardManagement/static/shoop_lastcard.png);
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.bg {
		width: 702rpx;
		height: 172rpx;
		background: url(../../myIntegrateShoop/static/shoop_card.png);
		background-size: 100%;
		background-repeat: no-repeat;
	}
</style>
